<template>
  <!--  -->
  <div :class="className" :style="{ height: height, width: width }"/>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";
import { echartsColor } from "./echartsColor";

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {

      // console.log('颜色：', echartsColor);

      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {
            textStyle: { color: 'rgba(255, 255, 255, .9)' },
          },
          grid: {
            top: '10%', right: '5%',
            bottom: '0%', left: '0%',
            containLabel: true, // 坐标轴是否显示刻度值
          },
          xAxis: { 
            type: 'value', 
            nameTextStyle: {
              color: 'rgba(255, 255, 255, .9)',
            },
          },
          yAxis: {
            type: 'category',
            nameTextStyle: {
              color: 'rgba(255, 255, 255, .9)',
            },
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
          },
          series: [{
              name: '正常台数',
              type: 'bar',
              stack: 'total',
              label: { show: true },
              emphasis: { focus: 'series' },
              barWidth: 16, // 柱状图宽度
              showBackground: true,
              backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' },
              textStyle: {
                color: 'rgba(255, 255, 255, .9)',
              },
              itemStyle: {
                color: echartsColor.bigDataStyle1.primary
              },
              data: [200, 200, 200, 200, 200, 200, 200],
            },{
              name: '异常台数',
              type: 'bar',
              stack: 'total',
              label: { show: true},
              emphasis: { focus: 'series'},
              textStyle: {
                color: 'rgba(255, 255, 255, .9)',
              },
              itemStyle: {
                color: echartsColor.bigDataStyle1.danger
              },
              data: [4, 5, 4, 5, 3, 2, 8]
            },

          ]

      });
    },
  },
};
</script>
